<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 子组件通过 $emit 自定义事件向父组件发送事件</title>
    <link rel="stylesheet" href="./css/global.css">
</head>

<body>
    <div id="app">
        <!-- 调用组件 -->
        <v-comp :title='title' :messages='messages'></v-comp>

        <!-- 父组件通过在模板上监听 $emit 的事件来接收子组件传递的事件 -->
        <!-- 这里 v-on 要监听的事件需要与$emit()发射的事件保持一致，大小写对应大小写，连字符对应连字符 -->

        <!-- <v-content @emit-click='btnClick'></v-content> -->
        <!-- 对应事件名：this.$emit('emit-click',item); -->

        <v-content @emitclick='btnClick'></v-content>
        <!-- 对应事件名：this.$emit('emitclick', item); -->

    </div>

    <!-- 组件模板 -->
    <template id='comp'>
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-html="msg" v-for='msg in messages'></li>
            </ul>
        </div>
    </template>

    <template id='content'>
        <div>
            <button v-for='item in categories' @click='childBtnClick(item)'>{{item.name}}</button>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        // 笔记列表组件
        const comp = {
            template: '#comp',
            props: {
                title: String,
                messages: {
                    type: Array,
                    default () {
                        return [];
                    }
                }
            },
        }

        const content = {
            template: '#content',
            data() {
                return {
                    categories: [{
                            id: 001,
                            name: '数码电器'
                        },
                        {
                            id: 002,
                            name: '电脑办公'
                        },
                        {
                            id: 003,
                            name: '图书影音'
                        },
                        {
                            id: 004,
                            name: '家装设计'
                        },
                    ]
                };
            },
            methods: {
                // 定义自定义事件
                childBtnClick(item) {
                    // 向父组件发射事件
                    // $emit('向父组件传递的自定义类型事件-必选','要传递的参数-可选');
                    // 这里要发射的事件名就是要向父组件传递的事件名，即父组件模板那里监听子组件的事件名，名称要保持一致，驼峰命名法无效，全小写对应全小写，连字符对应连字符
                    // this.$emit('emitClick', item);      //failed
                    // this.$emit('emit-click', item);    //OK
                    this.$emit('emitclick', item);         //OK
                    console.log('子组件：childBtnClick', JSON.stringify(item));
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {
                title: '子组件通过 $emit 自定义事件向父组件发送事件',
                messages: [
                    `子组件通过 $emit 向父组件发送事件，父组件通过在模板上监听 $emit 的事件来接收子组件传递的事件`,
                    `子组件 methods 中定义的事件名要和子组件模板中调用的事件名保持一致（可使用驼峰命名法，不可使用连字符）`,
                    `$emit('向父组件传递的自定义类型事件-必选','要传递的参数-可选')`,
                    `这里要发射的事件名就是要向父组件传递的事件名，即父组件模板那里监听子组件的事件名，
                    <br>名称要保持一致，驼峰命名法无效，全小写对应全小写，连字符对应连字符`,
                ]
            },
            components: {
                'vComp': comp,
                'vContent': content
            },
            computed: {},
            methods: {
                btnClick(item) {
                    console.log('父组件：btnClick ', item);
                }
            },
        });
    </script>
</body>

</html>
